﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
</head>
<body>
    <div id="top" onclick="toTop()" class="invisible"></div>
    <div style="width: 1140px; margin: auto;">
        <div id="left-gradient"></div>
        <div id="right-gradient"></div>
        <div id="content-div">
            <div id="content">
                @RenderBody()
            </div>
        </div>
    </div>
</body>
</html>

<script>
    calculateHeight();
    function calculateHeight() {
        var wH = $(window).height();
        var cH = $('#content').height();

        if (wH > cH)
            $("#content-div, #left-gradient, #right-gradient").height(wH);
        else {
            $("#content-div, #left-gradient, #right-gradient").height(cH);
        }
    }

    function toTop() {
        $(document).scrollTop(1);
    }

    $(window).resize(function () {
        calculateHeight();
    });

    $(window).load(function () {
        calculateHeight();
    });

    $(window).scroll(function () {
        var scroll = $(document).scrollTop();
        console.log(scroll);
        if (scroll > 500)
            $('#top').removeClass('invisible');
        else
            $('#top').addClass('invisible');
    });
</script>

<style>
    body {
        background-image: none;
        background-color: lightgray;
        margin: 0px;
    }

    h2 {
        margin: 0;
    }

    #top {
        float: right;
        position: fixed;
        right: 5px;
        bottom: 20px;
        background-image: url(../../Images/top.png);
        height: 40px;
        width: 40px;
        background-size: 40px 40px;
        opacity: 0.4;
    }

        #top:hover {
            opacity: 1;
            cursor: pointer;
        }

    #content {
        width: 1000px;
        margin: auto;
        background-image: url(../../Images/bgnoise_lg.png);
    }

    #content-div {
        background-image: url(../../Images/bgnoise_lg.png);
        width: 1100px;
        margin: auto;
    }

    #left-gradient {
        float: left;
        width: 20px;
        background: #d3d3d3; /* Old browsers */
        background: url();
        background: -moz-linear-gradient(left, #d3d3d3 0%, #808080 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d3d3d3), color-stop(100%,#808080)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, #d3d3d3 0%,#808080 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, #d3d3d3 0%,#808080 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, #d3d3d3 0%,#808080 100%); /* IE10+ */
        background: linear-gradient(to right, #d3d3d3 0%,#808080 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#808080',GradientType=1 ); /* IE6-8 */
        height: 302px;
    }

    #right-gradient {
        float: right;
        width: 20px;
        height: 302px;
        background: #808080; /* Old browsers */
        background: url();
        background: -moz-linear-gradient(left, #808080 0%, #d3d3d3 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, #808080 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, #808080 0%,#d3d3d3 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, #808080 0%,#d3d3d3 100%); /* IE10+ */
        background: linear-gradient(to right, #808080 0%,#d3d3d3 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#d3d3d3',GradientType=1 ); /* IE6-8 */
    }

    input[type="button"], input[type="submit"] {
        border-radius: 4px;
        background-color: #1957eb;
        color: white;
        padding: 8px;
        border: 1px solid grey;
    }

    .invisible {
        display: none;
        visibility: hidden;
    }
</style>

<script>
    updateSession();
    function updateSession() {
        $.ajax({
            type: 'POST',
            url: '/Home/CheckSession',
            contentType: 'application/json',
            success: function (response) {
                setTimeout(function () {
                    updateSession();
                }, 300000);
            }
        });
    }
</script>

@*button*@
<style>
    a.button {
        display: inline-block;
        background-color: #3bb3e0;
        padding: 10px;
        /*position: relative;*/
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #fff;
        border: solid 1px #186f8f;
        background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) );
        -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
        -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
        box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }

        a.button:active {
            padding-bottom: 9px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 11px;
            top: 1px;
            background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)) );
        }

    /*a.button::before {
	background-color:#ccd0d5;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:8px;
	left:-8px;
	top:-8px;
	z-index:-1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
	-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
	-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}*/
</style>

<style>
    .a_arrow_button {
        display: inline-block;
        background-color: #3bb3e0;
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #fff;
        position: relative;
        padding: 10px 20px;
        padding-right: 50px;
        background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) );
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
        -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
        -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
        box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    }

        .a_arrow_button:active {
            top: 3px;
            background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)) );
            -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
            -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
            -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
            box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
        }

        .a_arrow_button::before {
            background-color: #2591b4;
            background-image: url(../../Images/right_arrow.png);
            background-repeat: no-repeat;
            background-position: center center;
            content: "";
            width: 20px;
            height: 20px;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -9px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
            -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
            -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
            box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
        }

        .a_arrow_button:active::before {
            top: 50%;
            margin-top: -12px;
            -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
            -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
            -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
            box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
        }
</style>
